<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 机票预订系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }

        .hero-bg {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
        }

        .flight-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .flight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
            font-weight: 500;
        }

        .search-box {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .logo-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }

        .dropdown-menu.open {
            display: block;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f3f4f6;
        }

        .flight-segment {
            position: relative;
            margin-bottom: 1rem;
        }

        .remove-segment {
            position: absolute;
            right: -10px;
            top: -10px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
        }

        .add-segment {
            background-color: #3b82f6;
            color: white;
            border-radius: 0.25rem;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
<!-- Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="manager_index1" class="text-blue-500 font-medium">主页</a>
            <a href="manager_flight_search1" class="text-gray-600 hover:text-blue-500">航班查询</a>
            <a href="manager_order" class="text-gray-600 hover:text-blue-500">订单管理</a>
            <a href="manager_flight" class="text-gray-600 hover:text-blue-500">航班管理</a>
            <a href="manager_report" class="text-gray-600 hover:text-blue-500">报表统计</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <i class="fas fa-bell text-gray-500 text-xl cursor-pointer hover:text-blue-500"></i>
                <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
            </div>
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="h-8 w-8 rounded-full user-avatar flex items-center justify-center text-white">
                    <i class="fas fa-user-shield"></i>
                </div>
                <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${managername}">管理员</span>
                <div class="dropdown-menu" id="dropdown-menu">
                    <div class="border-t border-gray-200 my-1"></div>
                    <div class="dropdown-item text-red-500" onclick="location.href='manager_logout'">
                        <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Hero Section with Search -->
<div class="hero-bg py-16 md:py-24 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">探索世界，从花龙腾航开始</h1>
            <p class="text-xl md:text-2xl mb-8">享受舒适旅程，体验尊贵服务</p>
        </div>

        <!-- Search Box -->
        <form action="manager_flight_search2_1" method="get" class="bg-white rounded-lg p-6 search-box max-w-4xl mx-auto mt-8">
            <div class="flex border-b">
                <button type="button" id="one-way" class="px-4 py-2 font-medium text-gray-500">单程</button>
                <button type="button" id="round-trip" class="px-4 py-2 font-medium tab-active">往返</button>
                <button type="button" id="multi-city" class="px-4 py-2 font-medium text-gray-500">多程</button>
            </div>

            <!-- Round Trip Form -->
            <div id="round-trip-form" class="mt-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="roundDepartureCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        placeholder="北京"
                                        required
                                >
                                <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="text"
                                        name="roundArrivalCity"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                        placeholder="上海"
                                        required
                                >
                                <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="date"
                                        name="roundDepartureDate"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">返回日期</label>
                        <div class="relative">
                            <label>
                                <input
                                        type="date"
                                        name="roundReturnDate"
                                        class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                        required
                                >
                            </label>
                        </div>
                    </div>
                </div>
            </div>


            <div class="mt-6 flex justify-center">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300 flex items-center">
                    <i class="fas fa-search mr-2"></i> 查询航班
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Special Offers -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900">热门航线</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Offer 1 -->
        <div class="bg-white rounded-lg overflow-hidden flight-card" th:each="flight : ${flights}">
          <div class="relative">
            <img th:src="'static/cities/'+${flight.getArrival_city()}+'2.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-48 object-cover">
          </div>
          <div class="p-4">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-bold text-lg" th:text="${flight.getDeparture_city()} + ' → ' + ${flight.getArrival_city()}">北京 → 上海</h3>
                <p class="text-gray-500 text-sm">经济舱</p>
              </div>
              <div class="text-right">
                <span class="text-blue-500 font-bold text-xl" th:text="'¥'+${flight.getEconomy_price()}">¥599</span>
                <p class="text-gray-400 text-xs">明日最低价</p>
              </div>
            </div>
            <div class="mt-4 flex justify-between text-sm text-gray-600">
              <div>
                <i class="fas fa-plane-departure mr-1"></i>
                <span th:text="${flight.getDeparture_time()}">08:00</span>
              </div>
              <div>
                <i class="fas fa-plane-arrival mr-1"></i>
                <span th:text="${flight.getArrival_time()}">10:30</span>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

<!-- Popular Destinations -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-2xl font-bold text-gray-900">热门目的地</h2>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative group overflow-hidden rounded-lg h-48">
            <img th:src="'static/cities/'+${Destination1Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-4">
                <h3 class="text-white font-bold text-lg" th:text="${Destination1}">北京</h3>
            </div>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <img th:src="'static/cities/'+${Destination2Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-4">
                <h3 class="text-white font-bold text-lg" th:text="${Destination2}">北京</h3>
            </div>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <img th:src="'static/cities/'+${Destination3Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-4">
                <h3 class="text-white font-bold text-lg" th:text="${Destination3}">北京</h3>
            </div>
        </div>

        <div class="relative group overflow-hidden rounded-lg h-48">
            <img th:src="'static/cities/'+${Destination4Num}+'.jpg?version=' + ${#dates.createNow().time}" alt="Beijing" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <div class="absolute bottom-0 left-0 p-4">
                <h3 class="text-white font-bold text-lg" th:text="${Destination4}">北京</h3>
            </div>
        </div>

    </div>
</div>

<!-- Why Choose Us -->
<div class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-center text-2xl font-bold text-gray-900 mb-8">为什么选择花龙腾航</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-shield-alt text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">安全可靠</h3>
                <p class="text-gray-500">我们拥有最先进的机队和严格的安全标准，确保您的每一次飞行都安全无忧。</p>
            </div>

            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-heart text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">优质服务</h3>
                <p class="text-gray-500">我们训练有素的机组人员将为您提供贴心周到的服务，让您的旅程更加舒适。</p>
            </div>

            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-percentage text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">超值优惠</h3>
                <p class="text-gray-500">定期推出特价机票和会员专享优惠，让您以更实惠的价格享受高品质飞行体验。</p>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-bold mb-4 flex items-center">
                    <i class="fas fa-plane mr-2 text-blue-400"></i>
                    <span class="logo-text">花龙腾航</span>
                </h3>
                <p class="text-gray-400 mb-4">为您提供安全、舒适、便捷的航空旅行服务。</p>
                <div class="flex space-x-4">
                    <a href="https://weixin.com" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
                    <a href="https://weibo.com" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                    <a href="https://qq.com" class="text-gray-400 hover:text-white"><i class="fab fa-qq"></i></a>
                    <a href="https://douyin.com" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">关于我们</h3>
                <ul class="space-y-2">
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">企业文化</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">发展历程</a></li>
                    <li><a href="public_job_posting" class="text-gray-400 hover:text-white">招贤纳士</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">帮助中心</h3>
                <ul class="space-y-2">
                    <li><a href="public_faq" class="text-gray-400 hover:text-white">常见问题</a></li>
                    <li><a href="public_baggage_regulations" class="text-gray-400 hover:text-white">行李规定</a></li>
                    <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                    <li><a href="public_callus" class="text-gray-400 hover:text-white">联系我们</a></li>

                </ul>
            </div>

            <div>
                <h3 class="text-lg font-bold mb-4">联系方式</h3>
                <ul class="space-y-2 text-gray-400">
                    <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 客服热线: 19976338635</li>
                    <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> ganshenghao888@qq.com</li>
                    <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 广东省广州市天河区华南农业大学</li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
            <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 花龙腾航 版权所有</p>
            <div class="flex space-x-6">
                <a href="public_privacy_policy" class="text-gray-400 hover:text-white text-sm">隐私政策</a>
                <a href="public_user_agreement" class="text-gray-400 hover:text-white text-sm">使用条款</a>
                <a href="public_cookie" class="text-gray-400 hover:text-white text-sm">Cookie政策</a>
            </div>
        </div>
    </div>
</footer>

<script>
    // Tab switching functionality
    const tabs = document.querySelectorAll('.flex.border-b button');
    const oneWayForm = document.getElementById('one-way-form');
    const roundTripForm = document.getElementById('round-trip-form');
    const multiCityForm = document.getElementById('multi-city-form');

    document.getElementById('one-way').addEventListener('click', function() {
        window.location.href = 'manager_index1';
    });
    document.getElementById('multi-city').addEventListener('click', function() {
        window.location.href = 'manager_index3';
    });

    // Multi-city flight segments functionality
    const flightSegments = document.getElementById('flight-segments');
    const addSegmentBtn = document.getElementById('add-segment');

    addSegmentBtn.addEventListener('click', () => {
        const segmentCount = flightSegments.children.length;
        if (segmentCount >= 5) {
            alert('最多只能添加5个航段');
            return;
        }

        const newSegment = document.createElement('div');
        newSegment.className = 'flight-segment';
        newSegment.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发城市</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="text"
                                    name="multiDepartureCities[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                    placeholder="北京"
                                    required
                                >
                                <i class="fas fa-plane-departure absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">到达城市</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="text"
                                    name="multiArrivalCities[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 !text-black"
                                    placeholder="上海"
                                    required
                                >
                                <i class="fas fa-plane-arrival absolute right-3 top-3 text-gray-400"></i>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">出发日期</label>
                        <div class="relative">
                            <label>
                                <input
                                    type="date"
                                    name="multiDepartureDates[]"
                                    class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-black appearance-none"
                                    required
                                >
                            </label>
                        </div>
                    </div>
                </div>
                <div class="remove-segment">
                    <i class="fas fa-times"></i>
                </div>
            `;

        flightSegments.appendChild(newSegment);

        // Add event listener to the new remove button
        const removeBtn = newSegment.querySelector('.remove-segment');
        removeBtn.addEventListener('click', () => {
            if (flightSegments.children.length > 1) {
                flightSegments.removeChild(newSegment);
            } else {
                alert('至少需要一个航段');
            }
        });
    });

    // Simple flight search form validation
    document.querySelector('button[type="submit"]').addEventListener('click', (e) => {
        const activeTab = document.querySelector('.tab-active').id;

        if (activeTab === 'one-way') {
            const from = document.querySelector('#one-way-form input[name="departureCity"]').value;
            const to = document.querySelector('#one-way-form input[name="arrivalCity"]').value;
            const date = document.querySelector('#one-way-form input[type="date"]').value;

            if (!from || !to || !date) {
                e.preventDefault();
                alert('请填写完整的查询信息！');
            }
        } else if (activeTab === 'round-trip') {
            const from = document.querySelector('#round-trip-form input[name="roundDepartureCity"]').value;
            const to = document.querySelector('#round-trip-form input[name="roundArrivalCity"]').value;
            const departureDate = document.querySelector('#round-trip-form input[name="roundDepartureDate"]').value;
            const returnDate = document.querySelector('#round-trip-form input[name="roundReturnDate"]').value;

            if (!from || !to || !departureDate || !returnDate) {
                e.preventDefault();
                alert('请填写完整的查询信息！');
            }
        } else if (activeTab === 'multi-city') {
            const segments = document.querySelectorAll('#multi-city-form .flight-segment');
            let isValid = true;

            segments.forEach(segment => {
                const from = segment.querySelector('input[name="multiDepartureCities[]"]').value;
                const to = segment.querySelector('input[name="multiArrivalCities[]"]').value;
                const date = segment.querySelector('input[name="multiDepartureDates[]"]').value;

                if (!from || !to || !date) {
                    isValid = false;
                }
            });

            if (!isValid) {
                e.preventDefault();
                alert('请填写所有航段的完整信息！');
            }
        }
    });

    // Flight card hover effect
    const flightCards = document.querySelectorAll('.flight-card');

    flightCards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-5px)';
            card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.15)';
        });

        card.addEventListener('mouseleave', () => {
            card.style.transform = '';
            card.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 用户菜单功能
        const userMenu = document.getElementById('user-menu');
        const dropdownMenu = document.getElementById('dropdown-menu');

        userMenu.addEventListener('click', (event) => {
            event.stopPropagation();
            dropdownMenu.classList.toggle('open');
        });

        document.addEventListener('click', (event) => {
            const isClickInside = userMenu.contains(event.target) || dropdownMenu.contains(event.target);
            if (!isClickInside) {
                dropdownMenu.classList.remove('open');
            }
        });
    });
</script>
</body>
</html>